<template>
  <a-drawer
    width="65%"
    placement="right"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
    :title="drawerTitle"
    class="form-drawer"
  >
    <a-form-model
      :model="ruleForm"
      ref="ruleForm"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      class="form-model"
    >
      <a-form-model-item label="资方名称：" prop="name">
        <a-input v-model="ruleForm.name" placeholder="请输入" allow-clear :maxLength="50"></a-input>
      </a-form-model-item>
      <a-form-model-item label="详细地址" class="is-required">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-model-item prop="provinceCode">
              <cascaderSelect
                :province-code.sync="ruleForm.provinceCode"
                :city-code.sync="ruleForm.cityCode"
                :district-code.sync="ruleForm.districtCode"
                :names.sync="cascaderNames"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item prop="address">
              <a-input v-model="ruleForm.address" placeholder="请输入" allow-clear :maxLength="50"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model-item>
      <a-form-model-item label="联系人：" prop="contact">
        <a-input v-model="ruleForm.contact" placeholder="请输入" allow-clear :maxLength="50"></a-input>
      </a-form-model-item>
      <a-form-model-item label="联系电话：" prop="contactPhone">
        <a-input
          v-model="ruleForm.contactPhone"
          placeholder="请输入"
          allow-clear
        ></a-input>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 18, offset: 3 }">
        <a-button type="primary" @click="menuSubmit" :loading="submitLoading">提交</a-button>
        <a-button @click="onClose">取消</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-drawer>
</template>

<script>
import { formCapitalAdd, getCapitalInfo } from '@/api/capital'
import cascaderSelect from '@/myComponents/cascader-select.vue'
export default {
  name: 'CapitalForm',
  data() {
    return {
      visible: false,
      ruleForm: {
        name: '',
        provinceCode:'',
        cityCode:'',
        districtCode: '',
        address:'',
        contact:'',
        contactPhone: ''
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      rules: {
        name: [{ required: true, message: '资方名称不能为空' }],
        provinceCode: [{ required: true, message: '请选择省市区' }],
        address: [{ required: true, message: '详细地址不能为空' }],
        contact: [{ required: true, message: '联系人不能为空' }],
        contactPhone: [
          { required: true, message: '联系电话不能为空' },
          { message: '请输入正确的手机号', pattern: /^1[3456789]\d{9}$/ }
        ],
      },
      parentList: [],
      submitLoading: false,
      drawerTitle: '创建资方',
      cascaderNames: []
    }
  },
  methods: {
    open(record = {}) {
      if (record.id) {
        getCapitalInfo(record.id).then((res) => {
          res.data.cascaderArr = [res.data.provinceCode, res.data.cityCode, res.data.districtCode]
          this.ruleForm = res.data
          this.visible = true
        })
        this.title = '编辑资方'
      } else {
        this.title = '创建资方'
        this.visible = true
        setTimeout(() => {
          this.$refs.ruleForm.resetFields()
        }, 100);
      }
    },
    onClose() {
      this.visible = false
    },
    afterVisibleChange(val) {
      if (!val) {
        this.ruleForm = {
          name: '',
          provinceCode: '',
          cityCode: '',
          districtCode: '',
          address: '',
          contact: '',
          contactPhone: ''
        }
        this.cascaderNames = []
      }
    },
    menuSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let [provinceName, cityName, districtName] = this.cascaderNames
          this.submitLoading = true
          formCapitalAdd({...this.ruleForm, provinceName, cityName, districtName})
            .then(() => {
              this.$notification['success']({
                message: '提示',
                description: `${this.ruleForm.id ? '编辑' : '新增'}成功`
              })
              this.onClose()
              this.submitLoading = false
              this.$emit('on-submit')
            })
            .catch(() => {
              this.submitLoading = false
            })
        }
      })
    }
  },
  components: {
    cascaderSelect
  }
}
</script>

<style></style>
